<template>
  <view class="register-container">
    <!-- 注册卡片 -->
    <view class="register-card">
      <view class="register-header">
        <text class="title">Register</text>
      </view>

      <view class="register-form">
        <view class="form-item">
          <text class="label">用户名</text>
          <input
            class="input"
            placeholder="请输入用户名"
            v-model="data.account"
          />
        </view>

        <view class="form-item">
          <text class="label">邮箱</text>
          <input class="input" placeholder="请输入邮箱" v-model="data.email" />
        </view>

        <view class="form-item">
          <text class="label">密码</text>
          <input
            class="input"
            type="password"
            placeholder="请输入密码"
            v-model="data.password"
          />
        </view>

        <view class="form-item">
          <text class="label">确认密码</text>
          <input
            class="input"
            type="password"
            placeholder="再次输入密码"
            v-model="isPassword"
          />
        </view>

        <button class="register-button" @click="handleRegister">注册</button>

        <view class="login-link">
          <navigator url="/pages/login/login" class="link">返回登录</navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useAuthApi } from "../../api/auth";

const { register } = useAuthApi();

const username = ref("");
const email = ref("");
const password = ref("");
const confirmPassword = ref("");

const data = ref({
  account: "",
  password: "",
  email: "",
});

const isPassword = ref("");

const handleRegister = async () => {
  if (data.value.password != isPassword.value) {
    uni.showModal({
      title: "提示",
      content: "两次输入的密码不一致，请重新输入",
      showCancel: false,
      confirmText: "确定",
      confirmColor: "#a020f0",
    });

    return;
  }

  try {
    var auth = await register(data.value);
    uni.navigateTo({
      url: "/pages/login/login",
    });
  } catch (error) {
    uni.showModal({
      title: "提示",
      content: error,
      showCancel: false,
      confirmText: "确定",
      confirmColor: "#a020f0",
    });
  }
};
</script>

<style scoped>
/* 保持原有的样式不变 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #e6e6fa, #b0e0e6);
}

.register-card {
  width: 300px;
  padding: 40px;
  border-radius: 20px;
  color: #a020f0; /* 使用紫色 */
}

.register-header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #a020f0; /* 使用紫色 */
  margin-bottom: 30px;
}

.register-form {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 15px;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #a020f0; /* 使用紫色 */
}

.input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-bottom: 2px solid #a020f0; /* 使用紫色 */
  background: transparent;
  color: #a020f0; /* 使用紫色 */
  font-size: 14px;
  transition: border-bottom-color 0.3s;
}

.input:focus {
  border-bottom-color: #b0c4fa;
}

.register-button {
  width: 100%;
  height: 40px;
  background: linear-gradient(135deg, #e6e6fa, #b0c4fa);
  color: #a020f0; /* 使用紫色 */
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.register-button:hover {
  background: linear-gradient(135deg, #b0c4fa, #e6e6fa);
}

.login-link {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #a020f0; /* 使用紫色 */
}

.link {
  color: #a020f0; /* 使用紫色 */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.link:hover {
  color: #b0c4fa;
}
</style>
